<template>
    <div class="left">
        <div class="inputs">
            <el-input v-model="input" placeholder="搜索通知" @keyup.enter.native="transferStation(input)" clearable />
            <el-button @click="emit('update:release',true)" style="margin-left: 1vw; font-size: 20px;" type="primary">+</el-button>
        </div>
        <div :class="{table:true,activ:modelValue==1}" @click="emit('update:modelValue',1)" >
            <el-icon class="ico" color="#fff">
                <EditPen />
            </el-icon>我发布的通知</div>
           
        <div :class="{table:true,activ:modelValue==2}" @click="emit('update:modelValue',2)">
            <el-icon style="background-color: #FF943D;" class="ico" color="#fff">
                <Warning />
            </el-icon>我收到的通知</div>
    </div>

</template>

<script lang="ts" setup>
import { ref ,reactive} from "vue"
import { useStore } from '@/stores/counter'
import { showUser } from '@/request/api'
const store = useStore()


const data=defineProps<{
    modelValue:number,
    release:boolean,
    transferStation:Function
}>()
let input = ref<string>('')
let activ=ref(0)
let emit=defineEmits(['update:modelValue','update:release'])
</script>

<style lang=less  scoped>
.left {
    border-right: 1px solid #D6D6D6;
    width: 25%;
    padding-top: 2vh;
    height: calc(100% - 2vh);
    background-color: @backColor;
    color: @color;
    .table {
        margin: 2vh;
        padding: 1vw;
        cursor: pointer;
        .flexAc();

        .ico {
            margin-right: 1vw;
            background-color: #00ADFF;
            padding: 0.5vh;
            border-radius: 0.5vh;
        }
    }
    .activ{
        background-color: #d6d6d6b6;
       
    }
    .table:hover{
        background-color: #eff0f1ce;
    }

    .inputs {
        display: flex;
        // height: 20vh;
        justify-content: space-between;
        margin-bottom: 2vh;
        padding-right: 1vw;
    }
}
</style>